<template>
    <div class="farm-swapper">
        <!-- 检查是否在详情页路由中，如果是则只显示router-view -->
        <template v-if="$route.path.includes('farmDetail')">
            <router-view />
        </template>
        <template v-else>
            <div class="search-content">
                <el-space wrap>
                    <el-input v-model="formSearchFarmInfo.farmName" placeholder="请输入农场名称关键字查询" style="width: 300px;"/>
                    <el-date-picker
                        v-model="formSearchFarmInfo.dateRange"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="YYYY-MM-DD"
                        suffix-icon="Calendar"
                        :disabled-date="disableFutureDates" />
                    <el-select v-model="formSearchFarmInfo.status" placeholder="全部状态" clearable style="width: 100px;">
                        <el-option
                            v-for="opt in statusOptions"
                            :key="opt.value"
                            :label="opt.label"
                            :value="opt.value"
                        />
                    </el-select>
                </el-space>
                <el-button type="primary" @click="handleAddFarm">
                    <el-icon><Plus /></el-icon>
                    新增农场
                </el-button>
            </div>
            <div class="result-content">
                <el-table
                    :data="onnceTableData"
                    :header-cell-style="headerCellStyle"
                    style="width: 100%;"
                >
                    <el-table-column prop="id" label="序号" width="60" fixed/>
                    <el-table-column prop="farmName" label="农场名称" />
                    <el-table-column prop="area" label="面积（亩）" />
                    <el-table-column prop="affiliatingArea" label="所属地区"/>
                    <el-table-column prop="count" label="数量" />
                    <el-table-column prop="createDate" label="创建时间"/>
                    <el-table-column prop="taskStatus" label="状态">
                        <template #default="{row}">
                            <div class="status-container" style="display: flex; align-items: center; gap: 10px;">
                                <el-switch 
                                    v-model="row.isActive" 
                                    size="small"
                                    @change="handleStatusChange(row)"
                                />
                                <span>{{row.taskStatus}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- 操作列 -->
                    <el-table-column prop="operator" label="操作" width="150" fixed="right">
                        <template #default="{row, $index}">
                            <el-button
                                type="primary"
                                size="small"
                                @click="handleEdit(row, $index)"
                            >编辑</el-button>
                            <el-button
                                disabled
                                plain
                                size="small"
                                @click="handleEdit(row, $index)"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
import router from '@/router'
import { reactive,ref  } from 'vue'
// 时间选择器限制
const disableFutureDates = (date: Date) => date.getTime() > Date.now()
// 表头样式
const headerCellStyle = () => {
    return {
        backgroundColor: '#f8f8f8', // 设置背景色
        // color: '#000000',           // 设置文字颜色
        fontWeight: 'bold'
    }
}
// 农场查询条件
const formSearchFarmInfo = reactive({
    farmName:'',
    dateRange:'',
    status:''
})
// 状态 Options
const statusOptions = ref([
    { label: '全部', value: '0' },
    { label: '在营', value: '1' },
    { label: '停业', value: '2' },
])

// 模拟表格数据
const onnceTableData = ref([
    { id: 1, farmName: '安吉农场', area: 100, affiliatingArea: '浙江安吉', count: 1000, createDate: '2023-01-01', taskStatus: '在营', isActive: true },
    { id: 2, farmName: '北京农场', area: 200, affiliatingArea: '北京大兴', count: 2000, createDate: '2023-02-01', taskStatus: '在营', isActive: true },
    { id: 3, farmName: '上海农场', area: 150, affiliatingArea: '上海崇明', count: 1500, createDate: '2023-03-01', taskStatus: '停业', isActive: false }
])

// 处理状态开关变化
const handleStatusChange = (row: any) => {
    // 更新状态文本
    row.taskStatus = row.isActive ? '在营' : '停业';
    console.log('状态变更:', row.farmName, '变为', row.taskStatus);
    // 这里可以添加API调用逻辑，将状态变更保存到服务器
}

function handleAddFarm(){
    console.log('新增农场')
    // 使用相对路径跳转到农场详情页
    router.push({ path: '/farmManagement/index/farmDetail' });
}
function handleEdit(row: any, $index: number){
    console.log('编辑',row, $index)
}
</script>

<style lang="scss" scoped>
.farm-swapper{
    padding: 20px;
    .search-content{
        display: flex;
        justify-content: space-between;
    }
    .result-content{
        margin-top: 20px;
    }
}
</style>